<template>
  <view class="project-container">
    <z-paging ref="paging" v-model="projects"  @query="getList">
    <!-- 搜索栏 -->
    <view slot="top" class="search-bar">
      <uni-search-bar @confirm="search" v-model="queryParams.projectName" placeholder="搜索项目名称" />
    </view>

    <!-- 项目列表 -->
    <view class="project-list">
      <uni-card v-for="project in projects" :key="project.projectId" :is-shadow="false" class="project-card">
        <template v-slot:title>
          <view class="card-header">
            <text class="project-name">{{project.projectName}}</text>
            <uni-tag :text="project.projectStatus === 0 || project.projectStatus === '0' ? '未完成' : '已完成'" 
                    :type="getTagType(project.projectStatus)" 
                    size="small" />
          </view>
        </template>
        <view class="card-content">
          <view class="info-row">
            <text class="label">客户：</text>
            <text class="value">{{project.companyName}}</text>
          </view>
    
        </view>
        <template v-slot:actions>
          <view class="card-actions">
            <button size="mini" type="primary" @click="viewDetail(project)">查看详情</button>
          </view>
        </template>
      </uni-card>
    </view>
    <!-- 悬浮添加按钮 -->
    <view class="fab-button" @click="navigateToCreate">
      <image src="/static/images/icon/add.png" mode="aspectFit" class="fab-icon" />
    </view>
  </z-paging>
  </view>
</template>

<script>
import { listProjectDetail} from "@/api/mes/project"
import { listCompany } from '@/api/mes/company'
export default {
  data() {
    return {
      searchKeyword: '',
      projects: [
     
      ],
      loading: false, // 加载状态
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: null,
        companyId: null,
        projectStatus: null,
      },
      total: 0, // 总记录数
      customers: [ 
      ]
    }
  },
  onLoad() {
    // this.getList()
    this.getCustomers()
    
  },
  methods: {
    getCustomers() {
      listCompany({}).then(response => {
        this.customers = response.rows || [] 
      }) 
    },
    search(e) {
      // Reset to first page when searching
      this.$refs.paging.reload();
      // if (this.loading) return Promise.reject()
      // this.loading = true
      
      uni.showLoading({
        title: '加载中...'
      })
      
      // listProjectDetail(this.queryParams).then(response => {
      //   this.$refs.paging.completeByTotal(response.rows || [], response.total);
      //   this.total = response.total
      //   this.loading = false
      //   uni.hideLoading()
      // }).catch(error => {
      //   console.error('搜索项目失败', error)
      //   this.loading = false
      //   uni.hideLoading()
      //   uni.showToast({
      //     title: '搜索项目失败',
      //     icon: 'none'
      //   })
      // })
    },
    getTagType(status) {
      // 处理数字状态值
      if (status === 0 || status === '0') {
        return 'warning' // 未完成状态使用警告色
      } else if (status === 1 || status === '1') {
        return 'success' // 已完成状态使用成功色
      }
      
      // 处理文本状态值（兼容）
      const typeMap = {
        '未完成': 'warning',
        '已完成': 'success',
        '已暂停': 'warning'
      }
      return typeMap[status] || 'default'
    },
    viewDetail(project) {
      console.log(project)
      uni.navigateTo({
        url: `/packageProject/pages/detail?id=${project.projectId}`
      })
    },
    navigateToCreate() {
      uni.navigateTo({
        url: '/packageProject/pages/create'
      })
    },
    getList(pageNo, pageSize) {
      this.queryParams.pageNum = pageNo;
      this.queryParams.pageSize = pageSize;
      // if (this.loading) return Promise.reject()
      // this.loading = true
      
      uni.showLoading({
        title: '加载中...'
      })
    listProjectDetail(this.queryParams).then(response => {
        this.$refs.paging.completeByTotal(response.rows, response.total);
        // this.loading = false
        uni.hideLoading()
      }).catch(error => {
        this.$refs.paging.complete(false);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .search-bar {
    margin-bottom: 20rpx;
  }
  position: relative;

  .search-section {
    margin-bottom: 20rpx;
  }

  .project-list {
    .project-card {
      margin-bottom: 20rpx;

      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .project-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
      }

      .card-content {
        margin: 20rpx 0;

        .info-row {
          display: flex;
          margin-bottom: 10rpx;
          
          .label {
            width: 160rpx;
            color: #666;
            font-size: 28rpx;
          }
          
          .value {
            color: #333;
            font-size: 28rpx;
          }
        }
      }

      .card-actions {
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .fab-button {
    position: fixed;
    right: 30rpx;
    bottom: 30rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
    z-index: 99;

    .fab-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>